<!--
 * @Date: 2023-08-29 14:02:37
 * @LastEditTime: 2023-10-12 17:37:09
 * 介绍:
-->
<route lang="json">
{
  "meta": {
    "title": "t('bao-jia-ji-jing')"
  }
}
</route>
<script lang="ts" setup>
import { _require } from "@@/utils/tools";
import dayjs from "dayjs";
import { apiMyInsuredList, apiAllInsuredList } from "@@/api/wk/list";
import { fixedDecimals, omitText, numThousand } from "@@/utils/tools/format";
import { CstateTagEmun } from "@@/components/common/CstateTag";
import { sdkFindTokenBalance } from "@@/sdk/web3Eth";
import useBalanceStore from "@@/store/useBalanceStore";
import useTabPageStore from "@@/store/useTabPageStore";

const balanceStore = useBalanceStore();
const tabPageStore = useTabPageStore();

const WKC = computed(() => balanceStore.getCoinByCode("wkc"));

const { t } = useI18n();
const statusEnum = computed<CstateTagEmun>(() => [
  {
    text: t("dai-shen-he"),
    value: 0,
    style: { background: "var(--C-await)" },
  },
  {
    text: t("tong-guo"),
    value: 1,
    style: { background: "var(--C-success)" },
  },
  {
    text: t("ju-jue"),
    value: 2,
    style: { background: "var(--C-fail)" },
  },
]);
const data = reactive({
  fund: "",
});
async function getFund() {
  const res = await sdkFindTokenBalance(
    WKC.value?.contract_addr!,
    WKC.value?.format!,
    tabPageStore.homeData?.address.safe_address
  );
  if (!res.status) return;
  data.fund = res.data!;
}
getFund();
</script>
<template>
  <CpageView>
    <div class="auto-MT-md">
      <Ccard class="fill PL-xs PR-xs">
        <Cgrid class="T-A-C" col="1fr auto 1fr">
          <div>
            <h2>
              <span class="T-S-sm" style="vertical-align: super">$</span>
              {{ numThousand(fixedDecimals(data.fund, 4)) }}
            </h2>
            <div class="MT-xs T-S-sm C-T3">{{ $t("jiJinChi") }}</div>
          </div>
          <VanDivider vertical style="height: 100rem" />
          <div>
            <h2>
              <span class="T-S-sm" style="vertical-align: super">$</span>
              {{
                numThousand(
                  fixedDecimals(tabPageStore.homeData?.totalInsuredFund, 4)
                )
              }}
            </h2>
            <div class="MT-xs T-S-sm C-T3">{{ $t("baoJiaZongLiuShui") }}</div>
          </div>
        </Cgrid>
      </Ccard>

      <Rtabs>
        <VanTab :title="$t('wo-de')">
          <CrequestList :api="apiMyInsuredList">
            <template #item="{ item }">
              <Ccard class="B-B1">
                <div class="flex-J-SB flex-A-C">
                  <div>
                    <CstateTag
                      v-if="item.status == 1"
                      :enum="statusEnum"
                      :value="item.status"
                    />
                    <CcopyText v-else :copy-text="item.txid">
                      {{ omitText(item.txid) }}
                    </CcopyText>
                    <div class="MT-xs C-T3 T-S-sm">
                      {{ dayjs(item.created_at).format("YYYY-MM-DD HH:mm:ss") }}
                    </div>
                  </div>

                  <div class="C-M1">{{ fixedDecimals(item.money) }} WKC</div>
                </div>
              </Ccard>
            </template>
          </CrequestList>
        </VanTab>
        <VanTab :title="$t('quanWang')">
          <CrequestList :api="apiAllInsuredList">
            <template #item="{ item }">
              <Ccard class="B-B1">
                <div class="flex-J-SB flex-A-C">
                  <div>
                    <CcopyText :copy-text="item.txid">
                      {{ omitText(item.txid) }}
                    </CcopyText>
                    <div class="MT-xs C-T3 T-S-sm">
                      {{ dayjs(item.created_at).format("YYYY-MM-DD HH:mm:ss") }}
                    </div>
                  </div>

                  <div class="C-M1">{{ fixedDecimals(item.number) }} WKC</div>
                </div>
              </Ccard>
            </template>
          </CrequestList>
        </VanTab>
      </Rtabs>
    </div>
  </CpageView>
</template>
<style lang="scss" scoped></style>
